<template>
    <div>
      <el-form ref="editPram" :model="editPram" label-width="130px">
        <el-form-item
          label="商户名称"
          prop="merName"
          :rules="[{ required:true,message:'请输入商户名称',trigger:['blur','change'] }]"
        >
          <el-input v-model="editPram.merName"  :maxlength="20" placeholder="商户名称" />
        </el-form-item>

        <el-form-item
          label="登录账号"
          prop="account"
          :rules="[{ required:true,message:'请输入账号',trigger:['blur','change'] }]"
        >
          <el-input :disabled="inputDisabled" v-model="editPram.account"  :maxlength="20" placeholder="登录账号" />
        </el-form-item>

        <el-form-item
          label="登录密码"
          prop="pwd"
        >
          <el-input v-model="editPram.pwd"  :maxlength="20" placeholder="密码不填默认是手机号" />
        </el-form-item>

        <el-form-item
          label="商户AppId"
          prop="merAppId"
          :rules="[{ required:true,message:'请输入手机号',trigger:['blur','change'] }]"
        >
          <el-input v-model="editPram.merAppId"  :maxlength="20" placeholder="商户小程序AppId" />
        </el-form-item>

        <el-form-item
          label="商户AppSecret"
          prop="merAppSecret"
          :rules="[{ required:true,message:'请输入手机号',trigger:['blur','change'] }]"
        >
          <el-input v-model="editPram.merAppSecret"  :maxlength="20" placeholder="商户小程序AppSecret" />
        </el-form-item>

        <el-form-item
          label="手机号"
          prop="merPhone"
          :rules="[{ required:true,message:'请输入手机号',trigger:['blur','change'] }]"
        >
          <el-input v-model="editPram.merPhone"  :maxlength="20" placeholder="手机号" />
        </el-form-item>

        
        <el-form-item
          label="商户姓名"
          prop="merFullName"
          :rules="[{ required:true,message:'请输入商户姓名',trigger:['blur','change'] }]"
        >
          <el-input v-model="editPram.merFullName"  :maxlength="20" placeholder="商户姓名" />
        </el-form-item>

        <el-form-item
          label="商户地址"
          prop="merAddress"
        >
          <el-input v-model="editPram.merAddress"  :maxlength="20" placeholder="商户地址" />
        </el-form-item>

        <el-form-item
          label="商户关键字"
          prop="merKeywords"
        >
          <el-input v-model="editPram.merKeywords"  :maxlength="20" placeholder="商户关键字" />
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
        >
          <el-input-number type="text" v-model="editPram.sort" :precision="0" :step="1" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')" v-hasPermi="['admin:merchant:save']">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  <!--创建和编辑公用一个组件-->
  <script>
  import * as merchantApi from '@/api/merchant.js'
  import * as selfUtil from '@/utils/ZBKJIutil.js'
  export default {
    // name: "edit"
    props: {
      isCreate: {
        type: Number,
        default: 0
      },
      editData: {
        type: Object
      },
    },
    data() {
      return {
        loadingBtn: false,
        constants: this.$constants,
        editPram: {
          merName: null,
          account: null,
          merPhone: null,
          merAppId:null,
          merAppSecret:null,
          pwd:null,
          merFullName:null,
          merAddress:null,
          merKeywords:null,
          status: 1,
          sort:0,
          id: null
        },
        inputDisabled:false,
        categoryProps: {
          value: 'id',
          label: 'name',
          children: 'child',
          expandTrigger: 'hover',
          checkStrictly: true,
          emitPath: false
        }
      }
    },
    mounted() {
      this.initEditData()
    },
    methods: {
      close() {
        this.$emit('hideEditDialog')
      },
      initEditData() {


        const { merName, account,merPhone, merAppId,merAppSecret,pwd,merFullName,merAddress,merKeywords,status, id } = this.editData
        if(this.isCreate === 1){
          this.inputDisabled = true
          this.editPram.merName = merName
          this.editPram.account = account
          this.editPram.merPhone = merPhone
          this.editPram.merAppId = merAppId
          this.editPram.merAppSecret = merAppSecret
          this.editPram.merFullName = merFullName
          this.editPram.merAddress = merAddress
          this.editPram.merKeywords = merKeywords
          this.editPram.pwd = pwd
          this.editPram.status = status
          this.editPram.id = id
        }
      },

      handlerSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) return
          this.handlerSaveOrUpdate(this.isCreate === 0)
        })
      },
      handlerSaveOrUpdate(isSave) {
        if (isSave) {
         // this.editPram.pid = this.prent.id
          this.loadingBtn = true
          merchantApi.addMerchantApi(this.editPram).then(data => {
            this.$emit('hideEditDialog')
            this.$message.success('添加成功')
            this.loadingBtn = false
          }).catch(() => {
            this.loadingBtn = false
          })
        } else {
          this.loadingBtn = true
          supplierApi.editSupplierApi(this.editPram).then(data => {
            this.$emit('hideEditDialog')
            this.$message.success('更新成功')
            this.loadingBtn = false
          }).catch(() => {
            this.loadingBtn = false
          })
        }
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  